<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>桌游倒计时器</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .timer-display {
            font-size: 72px;
            margin: 20px 0;
            color: #333;
        }
        .player-indicator {
            font-size: 24px;
            margin-bottom: 20px;
        }
        .player1 { color: #e74c3c; }
        .player2 { color: #3498db; }
        .player3 { color: #2ecc71; }
        .controls {
            margin: 20px 0;
        }
        button {
            padding: 10px 20px;
            margin: 0 5px;
            font-size: 16px;
            cursor: pointer;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
        }
        button:hover {
            background-color: #2980b9;
        }
        .player-buttons {
            margin-top: 20px;
        }
        .player-btn {
            padding: 10px 15px;
            margin: 0 5px;
        }
        .player1-btn { background-color: #e74c3c; }
        .player2-btn { background-color: #3498db; }
        .player3-btn { background-color: #2ecc71; }
        .player-btn:hover {
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>桌游倒计时器</h1>
        
        <div class="player-indicator">
            当前玩家: <span id="current-player" class="player1">玩家1</span>
        </div>
        
        <div class="timer-display" id="timer">03:00</div>
        
        <div class="controls">
            <button id="start-btn">开始</button>
            <button id="pause-btn">暂停</button>
            <button id="reset-btn">重置</button>
        </div>
        
        <div class="player-buttons">
            <button class="player-btn player1-btn" onclick="switchPlayer(1)">切换到玩家1</button>
            <button class="player-btn player2-btn" onclick="switchPlayer(2)">切换到玩家2</button>
            <button class="player-btn player3-btn" onclick="switchPlayer(3)">切换到玩家3</button>
        </div>
    </div>

    <script>
        const socket = io();
        
        // 初始化变量
        let remainingTime = 180; // 默认3分钟
        
        // DOM元素
        const timerDisplay = document.getElementById('timer');
        const currentPlayerDisplay = document.getElementById('current-player');
        const startBtn = document.getElementById('start-btn');
        const pauseBtn = document.getElementById('pause-btn');
        const resetBtn = document.getElementById('reset-btn');
        
        // 格式化时间为MM:SS
        function formatTime(seconds) {
            const mins = Math.floor(seconds / 60);
            const secs = seconds % 60;
            return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
        }
        
        // 更新显示
        function updateDisplay(time, player) {
            timerDisplay.textContent = formatTime(time);
            
            // 更新玩家显示
            currentPlayerDisplay.textContent = `玩家${player}`;
            currentPlayerDisplay.className = `player${player}`;
        }
        
        // 切换玩家
        function switchPlayer(playerNum) {
            socket.emit('switch_player', { player: playerNum });
        }
        
        // 按钮事件监听
        startBtn.addEventListener('click', () => {
            socket.emit('start_timer', { initial_time: remainingTime });
        });
        
        pauseBtn.addEventListener('click', () => {
            socket.emit('pause_timer');
        });
        
        resetBtn.addEventListener('click', () => {
            socket.emit('reset_timer', { initial_time: 180, player_turn: 1 });
        });
        
        // Socket.IO 事件监听
        socket.on('timer_update', (data) => {
            remainingTime = data.remaining_time;
            updateDisplay(remainingTime, data.player_turn);
        });
        
        socket.on('timer_started', (data) => {
            remainingTime = data.remaining_time;
            updateDisplay(remainingTime, data.player_turn);
        });
        
        socket.on('timer_paused', () => {
            // 可以添加暂停效果
        });
        
        socket.on('timer_reset', (data) => {
            remainingTime = data.remaining_time;
            updateDisplay(remainingTime, data.player_turn);
        });
        
        socket.on('player_switched', (data) => {
            updateDisplay(remainingTime, data.player_turn);
        });
        
        socket.on('timer_end', (data) => {
            alert(`玩家${data.player}的时间到了！`);
        });
        
        // 初始显示
        updateDisplay(remainingTime, 1);
    </script>
</body>
</html>